<template>
  <div class="home">
    <div class="login-block">
      <h2>后台管理系统</h2>
      <el-tabs type="border-card" v-model="tabIndex" stretch>
        <el-tab-pane :name="0">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><UserFilled /></el-icon>
              <span>账号登录</span>
            </span>
          </template>
          <LoginAccount ref="formAccountRef" />
        </el-tab-pane>
        <el-tab-pane :name="1">
          <template #label>
            <span class="custom-tabs-label">
              <el-icon><Cellphone /></el-icon>
              <span>手机登录</span>
            </span>
          </template>
          <LoginMobile ref="formMobileRef" />
          <h2></h2>
        </el-tab-pane>
      </el-tabs>
      <div class="password-area">
        <el-checkbox :checked="remeneberPassword" @change="chagnePassword"
          >记住密码</el-checkbox
        >
        <el-link type="primary">忘记密码</el-link>
      </div>
      <div class="login-btn-area">
        <el-button type="primary" @click="login">立即登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { UserFilled, Cellphone } from '@element-plus/icons-vue';
import LoginMobile from './components/login-mobile.vue';
import LoginAccount from './components/login-account.vue';
import cacheUtils from '@/utils/local';

export default defineComponent({
  components: {
    UserFilled,
    Cellphone,
    LoginAccount,
    LoginMobile,
  },
  setup() {
    const tabIndex = ref<number>(0);

    // “忘记密码” 获取本地是否存在记住密码
    const remeneberPassword = ref<boolean>(
      cacheUtils.getCache('remenberP') ?? false,
    );

    // InstanceType<typeof 组件> 能拿到组件类型
    const formAccountRef = ref<InstanceType<typeof LoginAccount>>();
    const formMobileRef = ref<InstanceType<typeof LoginMobile>>();

    function login() {
      // console.log('login-page login', tabIndex.value);

      if (tabIndex.value) {
        // 手机号登录不需要缓存
        formMobileRef.value?.submit(formMobileRef.value.ruleFormRef);
      } else {
        // 账号密码登录 需要缓存
        formAccountRef.value?.submit(
          formAccountRef.value.ruleFormRef,
          remeneberPassword.value,
        );
      }
    }

    // 勾选“记住密码”  自定义事件
    function chagnePassword() {
      if (remeneberPassword.value) {
        cacheUtils.setCache('remenberP', false);
        remeneberPassword.value = false;
      } else {
        cacheUtils.setCache('remenberP', true);
        remeneberPassword.value = true;
      }
      // console.log('切换勾选', remeneberPassword.value);
    }

    onMounted(() => {
      // console.log('获取dom元素', formMobileRef.value);
    });
    return {
      tabIndex,
      remeneberPassword,
      formAccountRef,
      formMobileRef,
      login,
      chagnePassword,
    };
  },
});
</script>

<style scoped lang="less">
.home {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url('~@/assets/img/login-bg.svg') no-repeat 100% 100% / cover;
  .login-block {
    margin-top: -100px;
    .el-tabs {
      width: 400px;
    }
    .password-area {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }
    .login-btn-area {
      margin-top: 20px;
      .el-button {
        width: 100%;
        // height: 30px;
        // line-height: 30px;
      }
    }
  }
}
</style>
